<template>
	<div v-if="orders.length">
		<p>
			<span>当前订单状态：{{orders[0].status}}</span>
			<el-button plain>添加备注</el-button>
			<el-button type="primary" @click="dialogTableVisible=true">备注详情</el-button>
		</p>
		<h3>订单基本信息</h3>
		<el-table :data="orders" style="width: 100%">
			<el-table-column prop="OrderNum" label="订单编号" width="180">
			</el-table-column>
			<el-table-column prop="customerId" label="会员账号" width="180">
			</el-table-column>
			<el-table-column prop="pyment_method" label="支付方式">
			</el-table-column>
			<el-table-column prop="productId" label="支付单号">
			</el-table-column>
			<el-table-column prop="comfirm_at" label="提货日期">
			</el-table-column>
			<el-table-column prop="shoppingAdd" label="提货门店">
			</el-table-column>
		</el-table>

		<el-dialog title="备注详情" :visible.sync="dialogTableVisible" width="90%">
			<el-table :data="orders">
				<el-table-column label="序号" width="150">
					<template slot-scope="scope">
						{{scope.row.id}}
					</template>
				</el-table-column>
				<el-table-column prop="note" label="备注内容">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<span @click="toEdit(scope)">编辑</span>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog title="编辑提示信息" :visible.sync="noteVisible" width="50%">
			<textarea name="" id="" cols="30" rows="10" v-model="tempNode"></textarea>
			<br>
			<el-button @click="noteVisible=false">取消</el-button>
			<el-button @click="sureEdit">确定</el-button>
		</el-dialog>

	</div>
</template>

<script>
	// 导入获取详情订单api
	import {
		GetOrderDetail,
		UpdateNote
	} from '@/api/order.js'
	export default {
		methods: {
			toEdit(scope) {

				// 确定编辑的行
				this.editRow = {
					...scope.row
				};
				// 显示编辑框
				this.noteVisible = true;
				// 当前临时被编辑的文本
				this.tempNode = scope.row.note;
				// 编辑的行
				this.editIndex = scope.$index;
			},
			sureEdit() {
				// 修改编辑行的note
				this.editRow.note = this.tempNode;

				// 发送编辑请求给后台
				UpdateNote(this.editRow)
					.then(res => {
						if (res.data.code == 0) {
							this.$message({
								message: '修改成功',
								type: 'success'
							});
							// 隐藏编辑框
							this.noteVisible = false;
							// 更新本地数据
							this.orders[this.editIndex].note = this.tempNode;

						} else {
							this.$message({
								message: '修改失败',
								type: 'warning'
							});
						}
					})
			}
		},
		data() {
			return {
				// 订单列表
				orders: [],
				// 是否显示备注
				dialogTableVisible: false,
				// 编辑弹框
				noteVisible: false,
				// 临时编辑信息
				tempNode: "",
				// 正则被编辑的行
				editRow: {},
				// 正在编辑行的下标
				editIndex: null,
			}
		},
		// 组件创建完毕，获取订单详情
		created() {
			GetOrderDetail(this.$route.params.OrderNum)
				.then(res => {
					// 更新订单详情
					this.orders = res.data.data;
				})
		}
	}
</script>

<style>
</style>
